<template>
  <!-- 用户统计页面 -->
  <div>
  <!-- <el-tabs tab-position="left" ref="tabs" v-model="activeName" @tab-click="tabchang"> -->
    <!-- <el-tab-pane label="所有" name="first"> -->
      <!-- <div id="deptEcharts"></div> -->
      <el-row class="total">
        <el-col :span="4" v-for="(item,index) in prodata" :key="index">
          <div :class="'statistics leagueMember'+index">
            <h2>{{item.politicsName}}</h2>
            <span>人数：{{prodata[index].number}}</span>
          </div>
        </el-col>
      </el-row>
      <el-row class="information">
        <!-- 饼状图 -->
        <el-col :span="12">
          <div class="pending">
            <div class="total_deptbing" id="Piecharts"></div>
          </div>
        </el-col>
        <!-- 柱状图 -->
        <el-col :span="12">
          <div class="total_dept" id="deptEcharts"></div>
        </el-col>
      </el-row>
    <!-- </el-tab-pane> -->
  <!-- </el-tabs> -->
  </div>
</template>

<script>
export default {
  data(){
    return{
      activeName:"first",
      prodata:[],//人数
      rollPath:[],//申请人员信息
      timer:'',// 定时器
      marginTop:0, //数据的margin-top
      staticList:[],//统计数据
    }
  },
  created(){
  	this.timer= setInterval(this.showNotice, 100)   //100表示间隔时间，数字越大滚得越快
  },
  mounted(){
    this.optionEcharts()
    this.rollList()
  },
  methods:{
    rollList(){//获取申请人员信息
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        url:`/application/getAdminApplicationList`,
      }).then(res=>{
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.rollPath = res.data.data.list
        // console.log(this.rollPath)
      })
    },
    showNotice(){
      this.marginTop -= 1
    },
    optionEcharts(){//echarts图
      var num = []
      var nameList = []
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        // url:"api/user/getPoliticsNumber",
        url:"/user/getPoliticsNumber",
        method:"get",
      }).then(res=>{
        // console.log(res)
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.prodata = res.data.data
        // console.log(this.prodata)
        var objPir = []
        var sum=0//总数
        // console.log(objPir)
        this.prodata.forEach(element => {
          sum += element.number
          // console.log(element.politicsName)
          num.push(element.number)
          nameList.push(element.politicsName)
        });
        this.prodata.forEach(element => {
          var obj={}
          obj.value = element.number / sum
          obj.name = element.politicsName
          objPir.push(obj)
        })
        // console.log(sum)
        // 柱状图
        var optionsum={
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '10%',
            bottom: '3%',
            containLabel: true
          },
          tooltip:{
            trigger:'axis',
            extraCssText: "width:100px;",
          },
          xAxis: [
            {
              type: 'category',
              data:nameList,
              // axisTick: {
              //   alignWithLabel: true
              // },
              axisLabel:{
                interval:0,
                // rotate:-10
              },
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '人数',
              type: 'bar',
              // barWidth: '60%',
              data:num
            }
          ]
        }
        var myChart = this.$echarts.init(document.getElementById('deptEcharts'))
        myChart.setOption(optionsum)
        // 饼图
        var optionPie={
          title: {
            text: '各阶段人数占比统计',
            left: 'center'
          },
          tooltip:{
            trigger: 'item',
            extraCssText: "width:200px;",
            formatter: function(arg){
              return arg.name+'占比：'+Math.round(arg.percent*100)/100+'% '}
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '占比',
              type: 'pie',
              radius: '50%',
              data:objPir,
                itemStyle: {
                  emphasis:{
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  normal:{
                    label:{
                      // position:'inner',
                      show:true,
                      formatter:'{d}%'
                    },
                    labelLine:{show:true}
                  }
                }
            }
          ]
        }
        var myChartpie = this.$echarts.init(document.getElementById('Piecharts'))
        myChartpie.setOption(optionPie)
      })
    },
    tabchang(){
      // this.$nextTick(() => {
      //     // echarts.getInstanceByDom(this.$refs.chuli).resize();
      //   });
    }
  }
}
</script>

<style lang="scss">
// #deptEcharts{
//   // width: 800px;
//   height: 600px;
//   border: 1px solid #000;
// }
.total{
  // border: 1px solid #000;
  // text-align: left;
  .el-col{
    // border: 1px solid #0f0;
  }
  .statistics{
    margin-top: 3vh;
    color: rgb(0, 0, 0);
    height: 14vh;
    // border: 1px solid #f00;
    width: 90%;
    // margin: 0 auto;
    border-radius: 8px;
    // background: #fff;
    padding: 2vh;
    h2{
      margin: 0;
      // font-size: 2em;
      // text-align: center;
    }
    span{
      font-weight: 700;
      display: inline-block;
      margin-top: 1vh;
    }
  }
  .statistics_end{
    height: 14vh;
    border-radius: 8px;
    padding: 2vh;
    // border: 1px solid #f00;
    // margin: 0 auto;
    // background: #fff;
    h2{
      margin: 0;
      // font-size: 2em;
      // text-align: center;
    }
  }
  .leagueMember0{
    // background: linear-gradient(to right,#4a72df,#afbfec);
    background:#4a72df;
    
  }
  .leagueMember1{
    // background: linear-gradient(to right,#6050ec,#b9b2f7);
    background:#6050ec;
  }
  .leagueMember2{
    // background: linear-gradient(to right,#4b94e9,#b2d4fa);
    background: #4b94e9;
  }
  .leagueMember3{
    // background: linear-gradient(to right,#4cbedd,#ceeef8);
    background: #4cbedd;
  }
  .leagueMember4{
    // background: linear-gradient(to right,#35b99d,#c9f7ed);
    background: #35b99d;
  }
  .leagueMember5{
    // background: linear-gradient(to right,#960606,#f35959);
    background:#960606 ;
  }
}
.information{
  margin-top: 15vh;
  .pending{
    width: 95%;
    height: 50vh;
    // text-align: center;
    // padding: 15px;
    // border: 1px solid #ccc;
    // .roll{
    //   height: 86%;
    //   overflow: auto;
    // }
  }
  .total_dept{
    float: right;
    width: 96%;
    height: 50vh;
    border: 1px solid #ccc;
    div{
      width: 100%;
      canvas{
        width: 100%;
      }
    }
  }
  .total_deptbing{
    padding: 15px;
    width: 96%;
    height: 50vh;
    border: 1px solid #ccc;
    div{
      width: 100%;
      canvas{
        width: 100%;
      }
    }
  }
}
</style>